import React, { Component } from "react";
import { Alert, Input, Button, Card, Modal } from "antd";

class HelloTo extends Component {
  state={
    name:"Tim Black"
  }

  showModal=()=> {
    Modal.info({
      title: "Hello",
      content: (
        <div>
          你好，{this.state.name} 现在的时间是： {new Date().toLocaleString()}
        </div>
      ),
      onOk() {}
    });
  }

  onChange=(event)=>{
    this.setState({name:event.target.value});
  }

  render() {
    return (
      <Card title={"Hello To "+this.state.name} style={{ width: 500 }}>
        <Alert message={"你好 ," + this.state.name} type="success" />
        <Input placeholder="请输入你的名字" value={this.state.name} onChange={this.onChange} />
        <Button type="primary" onClick={this.showModal}>
          弹出消息
        </Button>
      </Card>
    );
  }
}

export default HelloTo;
